<template>
  <div class="post">
    <div class="friends">
      <div class="list_left">
        <img :src="imgHead">
        <div class="text">
          <span class="text_name">张某某</span>
          <span class="text_content">2017年4月25日</span>
        </div>
      </div>
      <button>邀请讨论</button>
    </div>
    <div class="qustion">大家都喜欢什么类型的房子呢?</div>
    <div class="qustion_img">
      <img :src="qustion_img">
    </div>
    <div class="text">
      <p>房地产是一个综合的较为复杂的概念，从实物现象看，它是由建筑物与土地共同构成。土地可以分为未开发的土地和已开发的土地，建筑物依附土地而存在，与土地结合在一起。建筑物是指人工建筑而成的产物，包括房屋和构筑物两大类。</p>
      <p>对于房地产的概念，应该从两个方面来理解：房地产既是一种客观存在的物质形态，同时也是一项法律权利。</p>
    </div>
    <div class="content_discuss">
      <div class="discuss_head">讨论(共555人)</div>
      <div class="discuss_list">
        <van-cell value="全部" is-link>
          <template slot="title">
            <span class="custom-text">{{number}}人讨论</span>
            <!-- <van-tag type="danger"> -->
            <img v-for="thumb in headerArr" :key="thumb" :src="thumb" class="arrImg">
            <!-- </van-tag> -->
          </template>
        </van-cell>
        <div class="list" v-for="item in list" :key="item.id">
          <div class="flex">
            <img :src="item.img">
            <div class="text">
              <span class="text_name">{{item.name}}</span>
              <span class="text_content">签名：{{item.signature}}</span>
              <div class="listArr" v-for="sst in item.users" :key="sst.id">{{sst.name}}：{{sst.text}}</div>
              <div class="text_tip">
                <div class="min_text">{{item.time}}</div>
                <div class="flex">
                  <div class="min_text">评论：{{item.pinlun}}</div>
                  <div class="min_text">评论：{{item.zan}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="rightan">
          <span>查看所以讨论</span>
          <van-icon name="arrow-down" size="10px" color="#e5e5e5"/>
        </div>
      </div>
    </div>
    <div class="footer">
      <input placeholder="请输入评论">
      <van-button plain type="primary">提交</van-button>
    </div>
  </div>
</template>

<script>
import { Icon, Cell, List, Button } from 'vant'

export default {
  components: {
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [List.name]: List,
    [Button.name]: Button
  },
  data() {
    return {
      imgHead:
        'http://n.sinaimg.cn/translate/567/w781h586/20190425/KPde-hvvuiyn9279369.jpg',
      qustion_img:
        'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
      headerArr: [
        'http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20190329/9a45702df92e4abcbafe7253b7e949f0.jpeg',
        'http://n.sinaimg.cn/translate/567/w781h586/20190425/KPde-hvvuiyn9279369.jpg'
      ],
      list: [
        {
          id: '0',
          img:
            'https://img.52z.com/upload/news/image/20180129/20180129092455_98714.jpg',
          name: '艰辛',
          signature: '生活痛苦。。。。',
          users: [
            {
              id: 0,
              name: '，偶，',
              text: 'hdfjdhfjh'
            },
            {
              id: 1,
              name: '某某',
              text: '。。。。。'
            }
          ],
          time: '2019年5月12日',
          pinlun: 10,
          zan: 10
        }
      ]
    }
  },
  computed: {
    number: function() {
      return this.headerArr.length
    }
  },
  methods: {
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        // 加载状态结束
        this.loading = false
        for (let i = 0; i < 5; i++) {
          this.list.push(this.list.length)
        }
        // 数据全部加载完成
        if (this.list.length >= 10) {
          this.finished = true
        }
      }, 500)
    }
  }
}
</script>

<style lang="less">
.post {
  background: #ffffff;
  //  padding: 10px 10px;
  padding-bottom: 100px !important;
  //  box-sizing: content-box;

  .friends {
    padding: 10px 10px;
    box-sizing: content-box;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .list_left {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
      }
      .text {
        margin-left: 5px;
        display: flex;
        flex-direction: column;
        .text_name {
          font-size: 14px;
          display: inline-block;
        }
        .text_content {
          font-size: 12px;
          color: #e5e5e5;
        }
      }
    }
    button {
      width: 70px;
      height: 35px;
      line-height: 35px;
      font-size: 12px;
      border: 1px solid #e5e5e5;
      border-radius: 3px;
      background-color: transparent;
    }
  }
  .qustion {
    font-size: 14px;
    // text-align: center;
    margin-left: 10px;
    height: 30px;
    line-height: 30px;
    margin-top: 10px;
  }
  .qustion_img {
    padding: 10px 10px;
    box-sizing: border-box;
    img {
      width: 100%;
      height: 130px;
    }
  }
  .text {
    font-size: 12px;
    padding: 10px 10px;
    box-sizing: content-box;
    p {
      text-indent: 2;
    }
  }
  .content_discuss {
    .discuss_head {
      margin-bottom: 10px;
    }
    .discuss_list {
      border: 1px solid #e5e5e5;
      padding: 10px 10px;
      box-sizing: border-box;
      .custom-text {
        margin-right: 10px;
      }
      .arrImg {
        width: 20px;
        height: 20px;
        border-radius: 50%;
      }
      .list {
        padding: 10px 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #e5e5e5;
        margin-bottom: 10px;
        img {
          width: 35px;
          height: 35px;
          border-radius: 50%;
        }
        .text {
          width: 100%;
          margin-left: 5px;
          display: flex;
          flex-direction: column;
          .text_name {
            font-size: 14px;
            display: inline-block;
          }
          .text_content {
            font-size: 12px;
            color: #e5e5e5;
          }
          .text_tip {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-top: 5px;
            .flex_space {
              margin-left: 10px;
            }
            .min_text {
              font-size: 12px;
              color: #e5e5e5;
            }
          }
        }
        .listArr {
          font-size: 13px;
        }
      }
      @-webkit-keyframes rightan {
        from {
          bottom: 0%;
          opacity: 0;
        }
        to {
          bottom: 10%;
          opacity: 1;
        }
      }
      .rightan {
        -webkit-animation: rightan 1s infinite;
        -webkit-animation-fill-mode: both;
        text-align: center;
        span {
          font-size: 12px;
          color: #e3e3e3;
        }
      }
    }
  }
  .flex {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }
  .footer {
    width: 100%;
    position: fixed;
    bottom: 50px;
    height: 50px;
    border-top: 1px solid #e5e5e5;
    padding: 10px 10px;
    box-sizing: border-box;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    input {
      width: 70%;
      height: 30px;
      padding-left: 5px;
      border-radius: 5px;
      border: 1px solid #e5e5e5;
    }
    .van-button {
      height: auto;
      line-height: normal;
    }
  }
}
</style>
